<jsp:include page="template-top.jsp" />

	<script src="javascripts/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'images/loading.gif',
				play: 2000,
				pause: 2000,
				hoverPause: true
			});
		});
	</script>
	<link rel="stylesheet" href="stylesheets/slides.css">

	<div id="slidecontainer">
			<div id="slides">
				<div class="slides_container">
					<a target="_blank"><img src="images/slide/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
					<a target="_blank"><img src="images/slide/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
					<a target="_blank"><img src="images/slide/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
					<a target="_blank"><img src="images/slide/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
				</div>
				<a href="#" class="prev"><img src="images/slide/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="images/slide/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="images/slide/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">	
	</div>
	
<jsp:include page="template-bottom.jsp" />